<template>
	<view>
		<view style="padding: 30rpx;padding-bottom: 120rpx;">
			<view style="display: flex;justify-content: space-between;">
				<view class="title">
					<view class="dd"></view>
					<text>订单详情</text>
				</view>
				<text style="color: #ff0000;">{{state==0?'待接单':state==1?'待结算':state==2?'已完成':'已取消'}}</text>
			</view>
			<!-- 订单标准 -->
			<view
				style="padding: 40rpx 30rpx;background-color: #00c297;border-radius: 50rpx;margin: 30rpx 0;display: flex;justify-content: flex-start;">
				<image style="width: 150rpx;height: 150rpx;border-radius: 30rpx;" src="../../../static/image/4.jpg"
					mode="aspectFill"></image>
				<view style="margin-left: 50rpx;font-size: 32rpx;line-height: 50rpx;color: #ffffff;">
					<text>回收类型：短裙</text><br />
					<text>重量：5</text><br />
					<text>预计收入金额：￥610</text>
				</view>
			</view>
			<!-- 订单详情 -->
			<view style="color: #cdcace;font-size: 30rpx;line-height: 50rpx;margin-bottom: 20rpx;">
				<text>订单编号：0000012</text>
				<view v-if="method=='上门取货'">
					<text>取货方式：上门取货</text><br />
					<text>取货时间：10:00-12:00</text><br />
					<text>取货地址：松江路286号</text><br />
					<text>备注：暂无</text>
				</view>
			</view>
			<!-- 回收员信息 -->
			<view v-if="(state==1||state==2) && method=='上门取货'">
				<view class="title">
					<view class="dd"></view>
					<text>顾客信息</text>
				</view>
				<view
					style="background-color: #00c297;border-radius: 50rpx;margin: 30rpx 0;font-size: 32rpx;line-height: 50rpx;color: #ffffff;">
					<view style="padding: 30rpx 40rpx;">
						<view style="display: flex;justify-content: space-between;margin-bottom: 20rpx;">
							<text>李克</text>
						</view>
					</view>
					<view
						style="display: flex;justify-content: space-around;line-height: 80rpx;border-top: 6rpx #fff solid;text-align: center;">
						<text @click="toPositionpage" style="width: 100%;border-right: 3rpx #fff solid;">分享</text>
						<text style="width: 100%;border-left: 3rpx #fff solid;">联系顾客</text>
					</view>
				</view>
			</view>
		</view>
		<view  v-if="state==0||state==1"
			style="position: fixed;bottom: 0;width: 100%;height: 120rpx;border-top: 1rpx #dfdfdf solid;background-color: #ffffff;">
			<button @click="updateOrder"
				style="width: 70%;height: 80rpx;margin-top: 20rpx;line-height: 80rpx;background-color: #00c297;color: #ffffff;font-size: 35rpx;">
				{{state==0?'接单':'回收清单'}}
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				state: 0,
				method: '上门取货',
				time: Number(new Date())
			}
		},
		onLoad: function(e) {
			this.state =Number(e.state)
		},
		methods: {
			updateOrder(){
				console.log(this.state);
				switch(this.state){
					case 0:
						uni.$u.toast('接单操作')
						break;
					case 1:
						uni.navigateTo({
							url:'./recyclingList'
						})
						break;
				}
			},
			// 前往回收员位置页面
			toPositionpage() {
				uni.$u.toast('分享操作')
			}
		}
	}
</script>

<style>
	.title {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.dd {
		width: 15rpx;
		height: 50rpx;
		background-color: #00c297;
		margin-right: 40rpx;
	}
</style>
